<template>
	<view class="register">
		<form @submit.prevent="postuser">
			<input v-model="account" type="text" placeholder="请输入账号或者用户名" />
			<input v-model="password" type="password" placeholder="请输入密码" />
			<button form-type="submit">注册</button>
		</form>
		<view class="rg">
			<u-radio-group v-model="type" placement="row" @change="groupChange">
				<u-radio :customStyle="{ marginBottom: '10rpx' }" label="用户" name="用户" checked></u-radio>
				<u-radio :customStyle="{ marginBottom: '10rpx' }" label="商家" name="商家"></u-radio>
			</u-radio-group>

			<navigator open-type="redirect" url="/pages/login/login">前往登陆></navigator>
		</view>
	</view>
</template>

<script>
	import store from "@/store/index.js";
	import {
		mapMutations,
	} from "vuex";
	export default {
		data() {
			return {
				account: null,
				password: null,
				type: "用户",
			};
		},
		methods: {
			...mapMutations("user", ["postuser"]),
			groupChange(e) {
				// console.log(e)
				this.type = e
			},
			postuser() {
				if (!this.account || !this.password) {
					uni.showToast({
						title: '账号和密码不能为空',
						icon: 'none'
					});
					return;
				}
				// 调用 Vuex 中的 postuser 方法
				this.$store.commit('user/postuser', {
					account: this.account,
					password: this.password,
					type: this.type
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.register {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: #f5f5f5;
	}

	input {
		width: 80vw;
		height: 100rpx;
		margin-top: 40rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		background-color: #fff;
	}

	button {
		width: 80vw;
		height: 100rpx;
		margin-top: 40rpx;
		background-color: #15b849;
		color: #fff;
		border: none;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-weight: bold;
		letter-spacing: 0.5em;
	}

	form {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.rg {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	navigator {
		margin-top: 20rpx;
		color: #15b849;
		font-size: 28rpx;
		text-decoration: none;
	}
</style>